import React from 'react'
import PropTypes from 'prop-types'
import { Table, Tag ,Icon} from 'antd'
import { color } from 'utils'
import styles from './recentSales.less'

const status = {
  1: {
    color: color.red,
    text: '1星',
  },
  2: {
    color: color.yellow,
    text: '2星',
  },
  3: {
    color: color.orange,
    text: '3星',
  },
  4: {
    color: color.blue,
    text: '4星',
  },
  5: {
    color: color.green,
    text: '5星',
  },
}

let starList={
  1:(<div style={{color:'red'}}><Icon type="apple" /></div>),
  2:(<div style={{color:'orange'}}><Icon type="apple" /><Icon type="apple" /></div>),
  3:(<div style={{color:'deeppink'}}><Icon type="apple" /><Icon type="apple" /><Icon type="apple" /></div>),
  4:(<div style={{color:'blue'}}><Icon type="apple" /><Icon type="apple" /><Icon type="apple" /><Icon type="apple" /></div>),
  5:(<div style={{color:'green'}}><Icon type="apple" /><Icon type="apple" /><Icon type="apple" /><Icon type="apple" /><Icon type="apple" /></div>),
}
const getStart=(text)=>{
  return starList[text]
}

function RecentSales ({ data }) {
  const columns = [
    {
      title: '品名',
      dataIndex: 'name',
    },
    {
      title: '产地',
      dataIndex: 'position',
    },
    {
      title: '年产量',
      dataIndex: 'yearOutPut',
    },
    {
      title: '昨日扫码数',
      dataIndex: 'yesterdaySee',
    },
    {
      title: '累计扫码数',
      dataIndex: 'allSee',
    },
    {
      title: '口感',
      dataIndex: 'mouthFeel',
      render: getStart
    },
    {
      title: '外观',
      dataIndex: 'feature',
      render: getStart,
    },
    {
      title: '服务',
      dataIndex: 'service',
      render: getStart,
    },
  ]
  return (
    <div className={styles.recentsales}>
      <Table pagination={false} columns={columns} rowKey={(record, key) => key} dataSource={data.filter((item, key) => key < 5)} />
    </div>
  )
}

RecentSales.propTypes = {
  data: PropTypes.array,
}

export default RecentSales
